<template>
  <div v-show="showTeaCommentModal" class="my-modal-page c-pt68">
    <div class="c-bg-white c-br20 c-mt20 c-pt20 c-mh24 c-pb20">
      <div class="c-flex-row c-ph20">
        <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(resultInfo.headimgurl, require('@/assets/defult_head.png'))" alt="" />
        <div class="c-pl20 c-flex-grow1 c-w0">
          <div class="c-fs20 c-flex-row c-aligni-center">
            <span class="c-pr20">{{resultInfo.nickname}}</span>
          </div>
          <div v-if="workType == 1" class="c-fs18 c-fc-gray c-lh c-pt16">已打卡{{resultInfo.finishNum}}天</div>
          <div v-else-if="workType == 2" class="c-fs18 c-fc-gray c-lh c-pt16">已完成{{resultInfo.finishNum}}个作业</div>
          <div v-else class="c-fs18 c-fc-gray c-lh c-pt16">已打卡{{resultInfo.finishNum}}课时</div>
        </div>
      </div>
      <!-- 作业内容 -->
      <template v-if="resultIndex >= 0&&showTeaCommentModal">
        <clock-aswer-content :clockTeaImg="clockTeaImg" @clickPicImage="clickPicImage" :teacher="teacher" :showCom='false' @clickPlayAudio='clickPlayAudio' @clickShowVideo='clickShowVideo' :playAduioSrc='playAduioSrc' :homeworkType='resultInfo.type' :aswerInfo='resultInfo' :aswerIndex='resultIndex'></clock-aswer-content>
      </template>
    </div>
    <div class="c-bg-white c-mh24 c-mt20 c-pt20 c-ph14 c-pb30 c-br20">
      <div class="c-ph10">
        <textarea @blur="blurInput" class="textarea needsclick c-lh42" v-model="inputCom" placeholder="给学员一点鼓励吧"></textarea>
        <div class="c-textAlign-r c-fs20 c-pb40 c-fc-gray">{{inputCom.length}}/10000</div>
      </div>

      <!-- 语音回答 -->
      <div class="c-flex-row c-flexw-wrap" v-if="uploadAudioList.length > 0">
        <!-- <div class="c-p"> -->
        <div @click.stop="clickPlayAudio(item.content)" v-for="(item,index) in uploadAudioList" :key="index" class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30 c-mh10">
          <!-- <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != item.content" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
          <img class="c-ww30 c-hh30 c-rotate180" v-else src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
          <div class="box c-ww32">
            <div class="wifi-symbol">
              <div class="wifi-circle first theme-bd2"></div>
              <div class="wifi-circle second theme-bd2" :class="playAduioSrc == item.content?'seconAnimation':''"></div>
              <div class="wifi-circle third theme-bd2" :class="playAduioSrc == item.content?'thirdAnimation':''"></div>
            </div>
          </div>
          <div class="c-fs20 theme-fc">{{item.time}}"</div>
          <i @click.stop="clickDelAudio(index)" class="iconfont c-fs28 c-fc-gray del-img">&#xe6ec;</i>
        </div>
        <!-- <div class="c-fs20 c-fc-gray c-flex-grow1 c-w0 c-ph20">{{item.time}}"</div> -->
        <!-- </div> -->
      </div>
      <!-- 图片回答 -->
      <div class="c-flexw-wrap c-flex-row" v-if="uploadImgList.length > 0">
        <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb30 c-mh10 c-flex-row c-flex-center c-p " :class="index % 3 == 0 ? '':'c-ml12'">
          <div @click="delUploadImage(index)" class="iconfont c-fs28 c-fc-gray del-img">&#xe6ec;</div>
          <img @click="clickPreviewImage(item.content)" class="c-ww160 c-hh160 c-br20" :src="$addXossFilter(item.content)" alt="" />
        </div>
      </div>
      <!-- 图片回答 -->
      <!-- <div class="c-flexw-wrap c-flex-row" v-if="uploadImgList.length > 0">
        <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww100 c-hh100 c-mb30 c-p c-mh10" :class="index % 3 == 0 ? '':'c-ml20'">
          <div @click.stop="delUploadImage(index)" class="iconfont c-fs28 c-fc-gray del-img">&#xe6ec;</div>
          <img @click.stop="clickPreviewImage(item.content)" class="c-w100 c-h c-br8" :src="$addXossFilter(item.content)" alt="" />
        </div>
      </div> -->
      <!-- 视频回答 -->
      <div class="c-flex-row c-flexw-wrap" v-if="uploadVideoList.length > 0">
        <div v-for="(item,index) in uploadVideoList" :key="index">
          <div @click.stop="clickShowVideo(item.realUrl)" class="c-p c-ww160 c-hh100 c-mb30 c-mh10" :class="index % 3 == 0 ? '':'c-ml12'">
            <img class="c-w100 c-h c-br20" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
            <i @click.stop="clickDelVideo(index)" class="iconfont c-fs28 c-fc-gray del-img">&#xe6ec;</i>
          </div>
        </div>
      </div>
      <!-- <div class="c-flexw-wrap c-flex-row">
        <div class="c-p c-ww166 c-hh100 c-mb30 c-mh10" v-for="(item,index) in uploadVideoList" :key="index">
          <div @click="clickShowVideo(item.realUrl)" class="c-w100 c-h c-br8">
            <img class="c-w100" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
          </div>
          <i @click="clickDelVideo(index)" class="iconfont c-fs36 c-fc-gray">&#xe6ec;</i>
        </div>
      </div> -->
      <div class="c-flex-row c-pb30 c-mt10 c-ph10 c-justify-sb c-aligni-center">
        <div @click='clickAddAudio' class="c-hh40 c-flex-row c-fc-gray c-fs22 c-aligni-center">
          <i class="iconfont icon-a-tuwenbeifen2"></i>
          <span class="c-pl16">语音</span>
        </div>
        <div @click='clickAddMusic' class="c-hh40 c-flex-row c-fc-gray c-fs22 c-aligni-center">
          <i class="iconfont icon-yinpin3"></i>
          <span class="c-pl16">音频</span>
        </div>
        <!-- <div class="c-bd-r1-mgray c-hh40"></div> -->
        <div @click='clickAddVideo' class="c-hh40 c-flex-row c-flex-center c-fc-gray c-fs22 c-aligni-center">
          <i class="iconfont icon-tuwenbeifen"></i>
          <span class="c-pl16">视频</span>
        </div>
        <!-- <div class="c-bd-r1-mgray c-hh40"></div> -->
        <div class="c-hh40 c-p">
          <div class="c-w100 c-hh40 c-flex-row c-flex-center c-fc-gray c-fs22 c-aligni-center" @click='clickAddPic'>
            <i class="iconfont icon-tuwen"></i>
            <span class="c-pl16">图片</span>
          </div>
          <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-w100 c-hh40 c-fs10" v-if="!isWeiXin" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickAddPic($event)" />
        </div>
      </div>

      <div v-if="resultInfo.type == 1||resultInfo.type == 4" class="c-fs22 c-flex-row c-aligni-center c-ph10">
        <span class="c-pr10">评分</span>
        <img v-for="index in 5" :key="index" @click="clickChangeRank(index)" class="c-ww30 c-hh30 c-mr8" :src="index <= curRankIndex ? require('@/assets/i/wap/clockIn/star_s.png') : require('@/assets/i/wap/clockIn/star_d.png')" alt="" />
        <span class="c-fs24 theme-fc">{{curRankIndex * 20}}分</span>
      </div>
    </div>

    <div class="c-fs24 c-flex-row c-aligni-center c-ph30 c-pv30">
      <span class="c-pr20">是否精选</span>
      <div @click="isHot = 1"><span class="c-ph10">是</span><span class="iconfont theme-fc c-fs24">{{isHot == 1 ? '&#xe6eb;' : '&#xe692;'}}</span></div>
      <div @click="isHot = 0"><span class="c-ph10">否</span><span class="iconfont theme-fc c-fs24">{{isHot == 1 ? '&#xe692;' : '&#xe6eb;'}}</span></div>
      <span class="c-pl20 c-pr20">是否置顶</span>
      <div @click="setTop"><span class="c-ph10">是</span><span class="iconfont theme-fc c-fs24">{{isTop == 1 ? '&#xe6eb;' : '&#xe692;'}}</span></div>
      <div @click="isTop = 0"><span class="c-ph10">否</span><span class="iconfont theme-fc c-fs24">{{isTop == 1 ? '&#xe692;' : '&#xe6eb;'}}</span></div>
    </div>

    <div class="c-ph24 c-pb20">
      <div @click="clickSentCom" class="c-hh72 c-fc-white theme-bg c-flex-row c-flex-center c-fs26 c-br10 c-br36">确认提交</div>
    </div>
    <input class="hide c-cursor-p needsclick" id="myUpload" type="file" accept="video/*" @change='onInputChange($event)' />
    <clock-audio-record :enableLongAudio='enableLongAudio'  :isclock="true"  :showAudioRecordModal='showAudioRecordModal' @closeAudioRecordModal='closeAudioRecordModal' @uploadAudioSuccess='uploadAudioSuccess'></clock-audio-record>
    <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
    <clock-tea-imgchart :imgurl="imgurl" :showclockTeaImg="showclockTeaImg" @updateImg='updateImg'></clock-tea-imgchart>
    <cj-popup v-model="isShow" round position="center" :closeable="true" :close-on-click-overlay="false" class="changeline-popup">
      <div class="c-ww410 c-ph24 c-pv24">
        <div class="c-fs32 c-fw600 c-textAlign-c">提示</div>
        <div class="c-fs24 c-textAlign-c c-mt16">该端暂不支持上传音频文件,请前往创匠打卡小程序参与</div>
        <div class="c-ww280 c-mlr-auto c-hh60 c-flex-row c-flex-center c-br50 c-fs24 c-fc-white c-bg-wxbtn c-mt20 c-p">
          前往打卡小程序
          <div class="open-tag-wrap" v-if="isSupport">
            <wx-open-launch-weapp
              class="launch-btn"
              :appid="`${appid}`"
              :username="username"
              :path="`${path}?${wxappQuery}`"
              @error="handleErrorFn"
              @launch="handleLaunch"
            >
              <script type="text/wxtag-template">
                <!-- 这里是为了撑开元素，让其可以被点击，不添加template会报错，添加了template不添加内容也会报错了 -->
                <div style="padding: 10000px">
                </div>
              </script>
            </wx-open-launch-weapp>
          </div>
          <div v-else class="open-tag-wrap" @click="clickGoWxApp"></div>
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import clockAswerContent from "@/components/templates/clockIn/clockAswerContent.vue";
import clockAudioRecord from "@/components/templates/clockIn/clockAudioRecord.vue";
import myLoading from "@/plugin/loading/loading.vue";
import clockTeaImgchart from "@/components/templates/clockIn/clockTeaImgchart.vue";
import TcVod from 'vod-js-sdk-v6'
let isLoading = false;
let serverIdImgArr = [];
let curScollTop = 0;
let uploader = null;

export default {
  components: {
    clockAudioRecord,
    clockAswerContent,
    myLoading,
    clockTeaImgchart
  },
  props: {
    enableLongAudio:{
      type: Number,
      default: 0
    },
    clockInId:{
      type: Number,
      default: 0
    },
    playAduioSrc: {
      type: String,
      default: ""
    },
    workType: {
      type: Number,
      default: 1
    },
    resultIndex: {
      type: Number,
      default: -1,
    },
    resultInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    showTeaCommentModal: {
      type: Boolean,
      default: false
    },
    imgData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    teacher:{
      type: String,
      default: ""
    },
    enHwId:{
      type: String,
      default: ""
    },
    enDate:{
      type: String,
      default: ""
    },
    curSelectDate:{
      type: String,
      default: ""
    },
    curId:{
      type: String,
      default: ""
    },
  },
  watch: {
    showTeaCommentModal(val) {
      if (val) {
        this.getTopNum()
        this.isWeiXin = utilJs.isWeiXin();
        isLoading = false;
        serverIdImgArr = [];
        this.isSupport = localStorage.getItem('isWxApp') != 1;
        this.uploadImgList = [];
        this.uploadAudioList = [];
        this.uploadVideoList = [];
        this.showAudioRecordModal = false;
        this.inputCom = '';
        this.curRankIndex = this.resultInfo.rank || 0;
        this.isHot = this.resultInfo.isHot;
        this.isTop = this.resultInfo.isTop
        console.log(this.resultInfo, 'this.wxappQuery')
        // this.resultInfo.aiNum = this.resultInfo.allNum || this.resultInfo.aiNum
        curScollTop = document.documentElement.scrollTop || document.body.scrollTop;
        document.querySelector('body').classList.add('open-disabled-scroll');
        if (this.workType == 1 || this.workType == 4) {
          this.wxappQuery = `workType=1&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInId}&curSelectDate=${this.curSelectDate}`
        }
        if (this.workType == 2) {
          this.wxappQuery = `workType=2&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInId}&curId=${this.curId}`
              //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
        }
        if (this.workType == 3) {
          this.wxappQuery = `workType=3&fromDetail=1&cId=${localStorage.getItem("companyId")}&clockInId=${this.clockInId}&curId=${this.curId}`
        }
        console.log(this.wxappQuery)
      } else {
        document.querySelector('body').classList.remove('open-disabled-scroll');
        //关闭弹窗，恢复滚动位置
        setTimeout(() => {
          window.scrollTo(0, curScollTop);
        });
      }
    }
  },

  data() {
    return {
      isSupport:false,
      appid: 'wxc99b13f1a0b51048',
      username:'',
      path:'/pages/clockIn/homeWorker/index',
      wxappQuery:'',
      uploadImgList: [],
      uploadAudioList: [],
      uploadVideoList: [],
      showAudioRecordModal: false,
      inputCom: '',
      curRankIndex: 0,
      isHot: 0,
      isTop: 0,
      isShow:false,
      showProgress: false,
      uploadProgress: '0',
      isWeiXin: true,
      clockTeaImg:false,
      imgurl:'',
      showclockTeaImg:false,
      topNum:0,
    };
  },
  methods: {
    clickGoWxApp() {
      let fullPath = `${this.path}?${this.wxappQuery}`;
      let query = `?appId=${this.appid}&path=${encodeURIComponent(JSON.stringify(fullPath))}`;
      utilJs.miniProgramGoTo('push', '/pages/home/goWxApp/index' + query);
    },
    handleLaunch(e) {
        console.log('handleLaunch---', e)
        // this.$emit('handleLaunch')
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    setTop() {
      let that = this
      if (that.topNum >= 10) {
        that.$cjConfirm({
        title: '置顶提示', //
        titleCenter: true, //标题是否居中
        message: "最多置顶10条日记，确定后会替换掉最早的置顶内容",
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '确定', //确认按钮文本
        onConfirm() {
          that.isTop = 1
        },
        onCancel() {
          that.isTop = 0
        },
      })
    } else {
      that.isTop = 1
    }
  },
    // 获取置顶数
    getTopNum() {
      utilJs.getMethod(
        `${global.apiurl}signCard/getTopNum/` + this.clockInId,
        (res) => {
          this.topNum = res
        })
    },
    clickPicImage(imgurl) {
      this.clockTeaImg = false
      this.showclockTeaImg = true
      this.imgurl = imgurl
    },
    //将base64转换为文件
    dataURItoBlob(base64Data) {
      var byteString;
      if (base64Data.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(base64Data.split(',')[1]);
      } else {
        byteString = unescape(base64Data.split(',')[1]);
      }
      var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
      var ia = new Uint8Array(byteString.length);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },
   base64Toblob(base64Str) {
      var blob = this.dataURItoBlob(base64Str);
      this.uploadImg(blob);
    },
    uploadImg(BlobFile) {
      let that = this;
      let fd = new FormData();
      fd.append('avatar', BlobFile);
      let xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          let urlObj = {
            content: JSON.parse(this.response).data.imageUrl
          };
          that.uploadImgList.push(urlObj);
        }
      }
      xhr.open('POST', global.apiurl + 'admin/common/examCertificate/imageUpload', true)
      xhr.send(fd)
    },
    updateImg(url) {
      this.clockTeaImg = false
      this.showclockTeaImg = false
      if (this.uploadImgList.length >= 9) {
        this.$showCjToast({
          text: "图片最多只能传9张",
          type: "warn",
          time: 1500
        });
        return;
      };
      //调用
      this.base64Toblob(url);
    },
    //图片修改
    picChange() {
      this.clockTeaImg = !this.clockTeaImg
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList = [];
    },
    clickAddVideo() {
      if (this.uploadVideoList.length > 8) {
        this.$showCjToast({
          text: "一次最多只能上传9个视频",
          type: "warn",
          time: 1000,
        });
        return;
      }
      document.getElementById('myUpload').click();
    },
    //获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
          time: 1000,
        });
        return;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    uploadVideoToTencent(inputFile) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({// eslint-disable-line
        getSignature: utilJs.getVideoSign
      })
      uploader = tcVod.upload({
        mediaFile: inputFile, // 媒体文件（视频或音频或图片），类型为 File
      })
      uploader.on('media_progress', function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`
      })
      uploader.done().then(function (result) {
        that.showProgress = false;
        let videoInfo = {
          url: result.fileId,
          realUrl: result.video.url
        };
        that.uploadVideoList.push(videoInfo);
        let data = {
          videoId: result.fileId,
          videoMp4: result.video.url,
          videoName: inputFile.name,
          type: 2,
        }
        that.videoFirstSave(data);
        that.uploadProgress = '0';
        document.getElementById('myUpload').value = null;
      }).catch((err) => {
        that.showProgress = false;
        that.$showCjToast({
          text: "上传失败，请尝试重新上传",
          type: "warn",
          time: 1000,
        });
        that.uploadProgress = '0';
        document.getElementById('myUpload').value = null;
        let errorData = {
          errorMsg: JSON.stringify(err),
          errorType: 'UPLOAD_VIDEO_ERROR',
        }
        utilJs.reprotError(errorData)
      })
    },
    //保存视频
    videoFirstSave(data) {
      utilJs.postMethod(global.apiurl + "signCard/videoFirstSave", data, res => { });
    },
    blurInput() {
      setTimeout(() => {
        window.scrollTo(0, 0);
      }, 100);
    },
    clickChangeRank(index) {
      if (this.curRankIndex == index) {
        this.curRankIndex = 0;
      } else {
        this.curRankIndex = index;
      }
    },
    clickAddMusic() {
      this.isShow = true
    },
    clickAddAudio() {
      this.$emit("cleanPlayAudioUrl");
      if (utilJs.getAppVersion() > 0) {
        this.initAppRecordEvent();
        utilJs.sendDataToAppNew('record', 'appAudioStartRecord');
        return;
      }
      this.showAudioRecordModal = true;
    },
    initAppRecordEvent() {
      window['cjAppAudioRecordResult'] = this.appRecordResult;
    },
    //app录音结果回调
    appRecordResult(resKey, time) {
      console.log('*******appRecordResult***', resKey, time)
      let resUrl = `https://qnoss.ckjr001.com/${resKey}`;
      let info = {
        content: resUrl,
        time:time
      }
      this.uploadAudioSuccess(info);
    },
    closeAudioRecordModal(state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
    },
    uploadAudioSuccess(audioContent, state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
      this.uploadAudioList.push(audioContent);
    },

    // 删除音频
    clickDelAudio(index) {
      this.uploadAudioList.splice(index, 1);
    },

    //点击回答图片
    clickAddPic(event) {
      if (this.uploadImgList.length >= 9) {
        this.$showCjToast({
          text: "图片最多只能传9张",
          type: "warn",
          time: 1500
        });
        return;
      };
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: 9, // 默认9
          sizeType: ["original"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        console.log(event.target.files)
        utilJs.imgUpload(event.target.files, this.imgData, 'clock', res => {
          let urlObj = {
            content: res
          };
          this.uploadImgList.push(urlObj);
        }, fRes => {});
      }
    },

    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs.uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "signCard/downWxImg ",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          for (let key of res) {
            if (this.uploadImgList.length >= 9) {
              break;
            }
            let urlObj = {
              content: key
            };
            this.uploadImgList.push(urlObj);
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
    },

    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.uploadImgList) {
        imgArr.push(key.content);
      }
      let imgData = {
          current: imgUrl, // 当前显示图片的http链接
          urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    clickPlayAudio(audioUrl) {
      this.$emit("clickPlayAudio", audioUrl);
    },
    clickShowVideo(videoMp4, videoM3u8) {
      this.$emit("clickShowVideo", videoMp4, videoM3u8);
    },
    checkInput() {
      if (this.inputCom.length > 10000) {
        this.$showCjToast({
          text: "文字长度不能超过10000",
          type: "warn",
          time: 1500
        });
        return false;
      }
      if (this.uploadImgList.length == 0 && this.inputCom.length == 0 && this.uploadAudioList.length == 0 && this.uploadVideoList.length == 0) {
        this.$showCjToast({
          text: "点评内容不能为空",
          type: "warn",
          time: 1500
        });
        return false;
      }
      return true;
    },
    //判断是否带有链接
    validateUrl(str) {
      let url = ''
      var regex = new RegExp(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/g)
      if (regex.test(str)) {
        url = str.match(regex)
        let newsstr = str
        for (let i = 0;i < url.length;i++) {
          newsstr = newsstr.replace(url[i], "<a v-on:click='event.stopPropagation()' href='" + url[i] + "' data-href='" + url[i] +
          "' class='c-fc-xblue'><span class='iconfont c-fs20 c-fc-xblue c-mr4 c-ml4'>&#xe64d;</span><span class='surl-text c-mr10'>网页链接</span></a>");
        }
        return newsstr
      } else {
        return false
      }
    },
    //发送评论
    clickSentCom() {
      if (!this.checkInput()) {
        return;
      }
      if (isLoading) {
        return;
      }
      isLoading = true;
      if (this.validateUrl(this.inputCom)) {
        this.inputCom = this.validateUrl(this.inputCom)
      }
      let data = {
        type: 3,
        isHot: this.isHot,
        isTop: this.isTop,
        rank: this.curRankIndex,
        examMainId: this.resultInfo.examMainId,
        replyId: this.resultInfo.userId,
        content: this.inputCom,
        imgArr: this.uploadImgList,
        audioArr: this.uploadAudioList,
        videoArr: this.uploadVideoList,
        teacherCom: true,
      };
      utilJs.postMethod(`${global.apiurl}signCard/teacherGrade`,
        data,
        res => {
          isLoading = false;
          this.$showCjToast({
            text: "评论成功",
            type: "success",
            time: 1500
          });
          let videoData = []
          for (let i in this.uploadVideoList) {
            videoData[i] = {
              videoMp4: this.uploadVideoList[i].realUrl,
              videoM3u8: '',
            }
          }
          data.videoArr = videoData
          data.headimgurl = res.headimgurl
          data.commentId = res.commentId
          data.nickname = res.nickname
          data.commentTime = res.commentTime
          // if (this.uploadVideoList.length > 0) {
          //   data.videoArr = [{
          //     videoMp4: this.uploadVideoList[0].realUrl,
          //     videoM3u8: ''
          //   }]
          // }
          this.uploadVideoList = [];
          console.log(this.resultInfo.isTop == this.isTop)
          if (this.resultInfo.isTop != this.isTop) {
            this.$emit("commentSuccess", data, 1);
          } else {
            this.$emit("commentSuccess", data, 0);
          }
        },
        failRes => {
          isLoading = false;
        }
      );
    }
  },
  //关闭时移除body的弹窗禁止滚动样式
  deactivated() {
    document.querySelector('body').classList.remove('open-disabled-scroll');
  },
  destroyed() {
    document.querySelector('body').classList.remove('open-disabled-scroll');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;
    max-width: 16rem;
    height: 100%;
    background-color: #f0f1f5;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0px auto;
}
.textarea {
  font-size: 0.6rem;
  outline: none;
  border: none;
  width: 100%;
  height: 7rem;
  background: none;
  -webkit-appearance: none;
  resize: none;
  padding: 0.2rem 0;
}
.textarea:focus {
  outline: none;
}
.textarea::-webkit-input-placeholder {
  color: #cccccc;
}
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  /* cursor: pointer; */
  /* background: rgba(37, 34, 34, 0.3); */
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.c-bg-wxbtn{
  background: #2979FF;
}
.open-tag-wrap {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
}
.launch-btn {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
</style>
